<template>
  <div class="orderListWrap" ref="orderListWrap">
    <div class="orderMainAAA" ref="orderMainAAA">
      <div class="orderMain" ref="orderMain">
      <input type="text" class="cardNoInput" ref="cardNoInput">
        <div class="title orderTitle" ref="orderTitle">
          <a :class="{active: currentOrderType === 0}" @click="switchOrderType(0)">
            {{lang['backlog of unfilled orders']}}
            <font v-show="((orderSubscript.UnfinishedCount || 0) - unfilledLength !== 0) && (currentOrderType !== 0)">
              {{((orderSubscript.UnfinishedCount || 0) - unfilledLength) > 99 ? '99+' : Math.abs((orderSubscript.UnfinishedCount || 0) - unfilledLength)}}
            </font>
          </a>
          <a :class="{active: currentOrderType === 1}" @click="switchOrderType(1)">
            {{lang['completed order']}}
            <font v-show="((orderSubscript.CompletedCount || 0) - completedLength > 0) && (currentOrderType !== 1)">
              {{((orderSubscript.CompletedCount || 0) - completedLength) > 99 ? '99+' : ((orderSubscript.CompletedCount || 0) - completedLength)}}
            </font>
          </a>
          <a :class="{active: currentOrderType === 2}" @click="switchOrderType(2)">
            {{lang['cancellation of order']}}
            <font v-show="((orderSubscript.CanceledCount || 0) - cancelledLength > 0) && (currentOrderType !== 2)">
              {{((orderSubscript.CanceledCount || 0) - cancelledLength) > 99 ? '99+' : ((orderSubscript.CanceledCount || 0) - cancelledLength)}}
            </font>
          </a>
          <a :class="{active: currentOrderType === 3}" @click="switchOrderType(3)">
            {{lang['I posted it']}}
          </a>
          <router-link to="/fiat/userguide" class="userguide" style="">{{lang['user guide']}}</router-link>
        </div>

        <!-- 未完成订单 -->
        <div class="unfilledOrdersList" ref="unfilledOrdersList" v-show="currentOrderType === 0">
          <section class="item" v-for="(item, index) in unfilledOrderList">
            <div class="orderNumber">
              <span>{{lang['order number']}}：{{item.OrderNo}}</span>
              <span class="countDown" v-show="item.gap">
                {{lang['Left']}} {{item.hours}}:<!--{{lang['hour']}}-->{{item.minutes}}:<!--{{lang['component']}}-->{{item.seconds}}<!--{{lang['second']}}-->
              </span>
          </div>
            <div class="content">
              <div class="td side" :class="{green: userInfo.userId === item.BuyerId, red: userInfo.userId === item.SellerId}" :style="{width: unfilledOrdersListWidths.buyRise}">
                  <span>{{userInfo.userId === item.BuyerId ? lang['buy for a rise'] : lang['offtake']}}</span>
                  <h3>{{item.CoinCode}}</h3>
              </div>

              <div class="td numberPrice" :style="{width: unfilledOrdersListWidths.numberPrice}">
                <p>
                  <span v-if="userInfo.userId === item.SellerId">
                    {{lang['bull position']}}： {{item.BuyerName}}
                  </span>
                  <span>
                    {{lang['price']}}：
                    {{item.Price | currency('USD', '', item.CurrencyPrecision) | fillDecimal(item.CurrencyPrecision)}}
                    {{item.CurrencyCode}}
                  </span>
                  <span>
                    {{lang['quantity']}}：
                    {{item.Quantity | currency('USD', '', item.CoinPrecision) | fillDecimal(item.CoinPrecision)}}
                    {{item.CoinCode}}
                  </span>
                  <span>
                  {{lang['aggregate amount total']}}：
                  {{item.Amount | currency('USD', '', 2) | fillDecimal(2)}}
                  {{item.CurrencyCode}}
                  </span>
              </p>
              </div>

              <div class="td bank" :style="{width: unfilledOrdersListWidths.bank}">
                <div  v-if="item.Status === 1">
                  <div class="list">
                    <p>
                      <a @click="checkPayWayDetail(item, index, 0)" v-show="item.HasBank" :class="{active: item.HasBank && item.defaultPayWay === 0}">
                        <img :src="'/static/images/ctc/Bank' + item.CurrencyCode + '.png'">
                      </a>
                      <a @click="checkPayWayDetail(item, index, 1)" v-show="item.HasAlipay" :class="{active: item.HasAlipay && item.defaultPayWay === 1}">
                        <img :src="'/static/images/ctc/Alipay' + item.CurrencyCode + '.png'">
                      </a>
                      <a @click="checkPayWayDetail(item, index, 2)" v-show="item.HasWeChat" :class="{active: item.HasWeChat && item.defaultPayWay === 2}">
                        <img :src="'/static/images/ctc/WebChat' + item.CurrencyCode + '.png'">
                      </a>
                    </p>
                  </div>
                  <ul class="creditcCard" v-if="item.HasBank" v-show="item.defaultPayWay === 0">
                    <li>{{lang['payee']}}：{{item.BankUserDTO.CardUserName}}</li>
                    <li>{{lang['bank names']}}：{{item.BankUserDTO.BankName}}</li>
                    <!-- <li>{{lang['bank Address']}}：{{item.BankUserDTO.Branch}}</li> -->
                    <li>{{lang['bank account']}}：{{item.BankUserDTO.CardNumber}} <a @click="copyCardNo(item.BankUserDTO.CardNumber)">
                      {{lang['duplicate']}}</a>
                    </li>
                  </ul>
                  <!--type 0是支付宝 1是微信,defaultPayWay-1能选中-->
                  <div class="alipayOrWechat" v-show="item2.Type === item.defaultPayWay" v-for="item2 in item.CustomerPayInfoDTOList">
                    <p class="name">
                      <a>{{lang['payee']}}：{{item2.Name}}</a>
                      <a>{{lang['account']}}：{{item2.Account}}</a>
                    </p>
                    <p class="img" v-if="item2.PayImg">
                      <a @click="viewQrCode(item2.PayImg, item.defaultPayWay)">
                        <img :src="item2.PayImg">
                        {{lang['click and enlarge']}}
                      </a>
                    </p>
                  </div>
                </div>

                <div class="confirmPayInfo" v-if="item.Status > 1">
                  <p v-if="userInfo.userId === item.SellerId">{{lang['bull position']}}: {{item.BuyerName}}</p>
                  <p v-if="userInfo.userId === item.BuyerId">{{lang['seller position']}}: {{item.SellerName}}</p>
                  <p>{{lang['mode of payment']}}：
                    <font v-show="item.HasBank">{{lang['bank card Pay']}}</font>
                    <font v-show="item.HasBank && (item.HasAlipay || item.HasWeChat)">、</font>
                    <font v-show="item.HasAlipay">{{lang['alipay Pay']}}</font>
                    <font v-show="item.HasWeChat && (item.HasBank || item.HasAlipay)">、</font>
                    <font v-show="item.HasWeChat">{{lang['weChat Pay']}}</font>
                  </p>
                  <p>{{lang['payment']}}：{{item.Amount | currency('USD', '', 2) | fillDecimal(2)}} {{item.CurrencyCode}}</p>
                </div>
              </div>

              <div v-if="item.Status === 1" class="td operate" :style="{width: unfilledOrdersListWidths.operate}">
                <!-- 买家状态 -->
                <div class="left" v-if="userInfo.userId === item.BuyerId">
                  <p>
                    <!-- 待支付 -->
                    {{lang['Pending payment']}}

                  </p>
                </div>
                <div class="right chilrenNoMarginTop" v-if="userInfo.userId === item.BuyerId">
                  <p class="confirmPayment">
                    <a class="btn" @click="confirmPay(item)">{{lang['confirm Payment']}}</a>
                    <a class="btn marginTop" @click="CancelOutstandingOrder(item, 2)">{{lang['cancellation of order list']}}</a>
                  </p>
                </div>
                <!-- 卖家状态 -->
                <!-- 等待买家付款 -->
                <p v-if="userInfo.userId === item.SellerId">{{lang['waiting for buyer to pay']}}</p>
              </div>

              <div v-if="item.Status === 2" class="td operate" :style="{width: unfilledOrdersListWidths.operate}">

                <div v-if="userInfo.userId === item.BuyerId">
                  <div class="left">
                    <!-- 等待对方放币 -->
                    <p>{{lang['waiting for the other side to release the coin']}}</p>
                  </div>
                  <div class="right chilrenNoMarginTop">
                    <p>
                      <a class="btn" @click="uploadPayImg(item)">{{lang['uploading payment voucher']}}</a>
                      <a class="link" @click="checkPhone(item, index)" v-show="!item.isCheckPhone">
                        <!-- 查看卖家联系方式 -->
                        {{lang['Check the seller contact information']}}
                      </a>
                      <font v-show="item.isCheckPhone">
                        {{(item.SellerAreaCode || '') + (item.SellerPhone || '')}}
                      </font>
                    </p>
                  </div>
                </div>

                <div v-if="userInfo.userId === item.SellerId">
                  <div class="left green">
                    <p>{{lang['held']}}</p>
                  </div>
                  <div class="right chilrenNoMarginTop">
                    <p>
                      <a class="btn" @click="sendCoin(item)">{{lang['set the coin']}}</a>
                    </p>
                  </div>
                </div>

              </div>

              <div v-if="item.Status === 3" class="td operate" :style="{width: unfilledOrdersListWidths.operate}">
                <!-- 买家状态 -->
                <p v-if="userInfo.userId === item.BuyerId" class="green">{{lang['held']}}</p>

                <!--卖家状态 -->
                <div class="left" v-if="userInfo.userId === item.SellerId">
                  <!-- 冻结中 -->
                  <p class="green">{{lang['held']}}</p>
                </div>
                <div class="right chilrenNoMarginTop" v-if="userInfo.userId === item.SellerId">
                  <!-- 放币 -->
                  <p>
                    <a class="btn" @click="sendCoin(item)" >{{lang['set the coin']}}</a>
                </p>
                </div>
              </div>

              <div v-if="item.Status === 4" class="td operate" :style="{width: unfilledOrdersListWidths.operate}">
                <!-- 买家状态 -->
                <p v-if="userInfo.userId === item.BuyerId" class="green">{{lang['held']}}</p>

                <!-- 卖家状态 --> <!-- 放币 -->
                <p v-if="userInfo.userId === item.SellerId">
                  <a class="btn" @click="sendCoin(item)">{{lang['set the coin']}}</a>
                </p>
              </div>

              <div v-if="item.Status === 7 || item.Status === 5" class="td operate" :style="{width: unfilledOrdersListWidths.operate}">
                <!-- 买家状态 -->
                <!-- 客服处理中 -->
                <p class="green" v-if="userInfo.userId === item.BuyerId">
                  {{lang['c2c customer service processing']}}
                </p>

                <!-- 卖家状态 -->
                  <!-- 客服处理中 -->
                  <p class="green"  v-if="userInfo.userId === item.SellerId">
                    {{lang['c2c customer service processing']}}
                  </p>
              </div>

            </div>
          </section>

          <section class="emptyOrder" v-show="!unfilledOrderList || !unfilledOrderList.length">
            <img src="../../../assets/images/noNews.png">
            <h2>{{lang['no orders have been completed']}}</h2>
            <p v-show="mixUserInfo.token && pair.coinCode !== 'VHKD' && pair.coinCode !== 'USDT'">
              {{lang['warm tips more than three cancellations']
              .replace('{money}', currentFeeConfig.DepositAmount || 0)
              .replace('{time}', getSettingInfo.CancelHour || 0)
              .replace('{count}', getSettingInfo.MaxAllowCancelCount || 0)}}
            </p>
          </section>
        </div>

        <!-- 已完成订单 -->
        <div class="completeOrderList" ref="completeOrderList" v-show="currentOrderType === 1">
          <div class="tr thead" v-show="!(!filledOrderList || !filledOrderList.length)">
            <div class="td" :style="{width: completeOrderWidths.time}">
              <p>{{lang['order time']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.orderNumber}">
              <p>{{lang['order number']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.account}">
              <p>{{lang['register_user']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.type}">
              <p>{{lang['buy']}}/{{lang['sell']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.currency}">
              <p>{{lang['trade on']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.price}" style="text-align:right">
              <p>{{lang['price']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.number}" style="text-align:right">
              <p>{{lang['quantity']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.amount}" style="text-align:right">
              <p>{{lang['amount of money']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.status}" style="text-align:right">
              <p>{{lang['status']}}</p>
            </div>
          </div>
          <div class="tr tbody" v-for="item in filledOrderList">
            <div class="td" :style="{width: completeOrderWidths.time}"><p>{{currentDate(item.CreateTimeStamp)}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.orderNumber }"><p>{{item.OrderNo}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.account}">
              <p>{{userInfo.userId === item.BuyerId ? item.SellerName : item.BuyerName}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.type}">
              <p :class="userInfo.userId === item.BuyerId ? 'green' : 'red'">
                {{userInfo.userId === item.BuyerId ? lang['buy for a rise'] : lang['offtake']}}
              </p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.currency}"><p>{{item.CoinCode}}/{{item.CurrencyCode}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.price}" style="text-align:right">
              <p>{{item.Price | currency('USD', '', item.CurrencyPrecision) | fillDecimal(item.CurrencyPrecision)}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.number}" style="text-align:right">
              <p>
                {{item.Quantity | currency('USD', '', item.CoinPrecision) | fillDecimal(item.CoinPrecision)}}
              </p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.amount}" style="text-align:right"><p>{{item.Amount | currency('USD', '', 2) | fillDecimal(2)}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.status}" style="text-align:right;"><p>{{lang['off the stocks']}}</p></div>
          </div>

          <section class="emptyOrder" v-show="!filledOrderList || !filledOrderList.length">
            <img src="../../../assets/images/noNews.png">
            <h2>{{lang['pending completion of order']}}</h2>
            <p v-show="mixUserInfo.token && pair.coinCode !== 'VHKD' && pair.coinCode !== 'USDT'">
              {{lang['warm tips more than three cancellations']
              .replace('{money}', currentFeeConfig.DepositAmount || 0)
              .replace('{time}', getSettingInfo.CancelHour || 0)
              .replace('{count}', getSettingInfo.MaxAllowCancelCount || 0)}}
            </p>
          </section>
        </div>

        <!-- 取消订单 -->
        <div class="completeOrderList" ref="cancelOrdersList" v-show="currentOrderType === 2">
          <div class="tr thead" v-show="!(!cancelledOrderList || !cancelledOrderList.length)">
            <div class="td" :style="{width: completeOrderWidths.time}">
              <p>{{lang['order time']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.orderNumber }">
              <p>{{lang['order number']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.account}">
              <p>{{lang['register_user']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.type}" >
              <p>{{lang['buy']}}/{{lang['sell']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.currency}">
              <p>{{lang['trade on']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.price}" style="text-align:right">
              <p>{{lang['price']}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.number}" style="text-align:right">
              <p>{{lang['quantity']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.amount}" style="text-align:right">
              <p>{{lang['amount of money']}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.status}" style="text-align:right;">
              <p>{{lang['status']}}</p>
            </div>
          </div>
          <div class="tr tbody" v-for="item in cancelledOrderList">
            <div class="td" :style="{width: completeOrderWidths.time}"><p>{{currentDate(item.CreateTimeStamp)}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.orderNumber }"><p>{{item.OrderNo}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.account}">
              <p>{{userInfo.userId === item.BuyerId ? item.SellerName : item.BuyerName}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.type}">
              <p :class="userInfo.userId === item.BuyerId ? 'green' : 'red'">
                {{userInfo.userId === item.BuyerId ? lang['buy for a rise']: lang['offtake']}}
              </p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.currency}"><p>{{item.CoinCode}}/{{item.CurrencyCode}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.price}" style="text-align:right">
              <p>{{item.Price | currency('USD', '', item.CurrencyPrecision) | fillDecimal(item.CurrencyPrecision)}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.number}" style="text-align:right">
              <p>{{item.Quantity | currency('USD', '', item.CoinPrecision) | fillDecimal(item.CoinPrecision)}}</p>
            </div>
            <div class="td" :style="{width: completeOrderWidths.amount}" style="text-align:right"><p>{{item.Amount | currency('USD', '', 2) | fillDecimal(2)}}</p></div>
            <div class="td" :style="{width: completeOrderWidths.status}" style="text-align:right;">
              <p v-if="item.Status === 6">{{lang['cancelBthss']}}</p>
              <p v-if="item.Status === 8">{{lang['customer service cancellation']}}</p>
            </div>
          </div>
          <section class="emptyOrder"  v-show="!cancelledOrderList || !cancelledOrderList.length">
            <img src="../../../assets/images/noNews.png">
            <h2>{{lang['no cancellation order']}}</h2>
            <p v-show="mixUserInfo.token && pair.coinCode !== 'VHKD' && pair.coinCode !== 'USDT'">
              {{lang['warm tips more than three cancellations']
              .replace('{money}', currentFeeConfig.DepositAmount || 0)
              .replace('{time}', getSettingInfo.CancelHour || 0)
              .replace('{count}', getSettingInfo.MaxAllowCancelCount || 0)}}
            </p>
          </section>
        </div>

        <!-- 我发布的 -->
        <div class="completeOrderList" ref="myOrderList" v-show="currentOrderType === 3">
          <div class="tr thead" v-show="!(!myOrderList || !myOrderList.length)">
              <div class="td" :style="{width: myOrderListWidths.coin}">
                <p>{{lang['trade on']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.side}">
                <p>{{lang['buy']}}/{{lang['sell']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.price}" style="text-align:right">
                <p>{{lang['price']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.quantity}" style="text-align:right">
                <p>{{lang['quantity']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.amount}" style="text-align:right">
                <p>{{lang['amount of money']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.status}" style="text-align:right">
                <p>{{lang['status']}}</p>
              </div>
              <div class="td" :style="{width: myOrderListWidths.operation}" style="text-align:right">
                <p>{{lang['operate']}}</p>
              </div>
          </div>
          <div class="tr tbody" v-for="item in myOrderList">
            <div class="td" :style="{width: myOrderListWidths.coin}" :class="{green: item.TradeSide === 0, red: item.TradeSide === 1}">
              <p>{{item.CoinCode}}/{{item.CurrencyCode}}</p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.side}" :class="{green: item.TradeSide === 0, red: item.TradeSide === 1}">
              <p :class="item.TradeSide === 0 ? 'green' : 'red'">
                {{item.TradeSide === 0 ? lang['buy for a rise'] : lang['offtake']}}
              </p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.price}" style="text-align:right">
              <p>{{item.Price | currency('USD', '', item.CurrencyPrecision) | fillDecimal(item.CurrencyPrecision)}}</p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.quantity}" style="text-align:right">
              <p>{{item.QuoteQuantity | currency('USD', '', item.CoinPrecision) | fillDecimal(item.CoinPrecision)}}</p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.amount}" style="text-align:right">
              <p>{{item.Amount | currency('USD', '', 2) | fillDecimal(2)}}</p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.status}" style="text-align:right">
              <!-- 待成交 -->
              <p v-if="item.Status === 0">{{lang['pending transaction']}}</p>
              <!-- 已取消 -->
              <p v-if="item.Status === 6">{{lang['cancelBthss']}}</p>
              <!-- 已完成 -->
              <p v-if="item.Status === 12">{{lang['off the stocks']}}</p>
            </div>
            <div class="td" :style="{width: myOrderListWidths.operation}" style="text-align:right">
              <p v-if="item.Status === 0">
                <a class="blue marginRight" @click="showStartAdBox(item)" v-html="item.IsEnable ? lang['c2c suspend'] : lang['c2c start using']"></a>
                <a class="blue" @click="cancelOrder(item, 1)">{{lang['cancelBth']}}</a>
              </p>
              <p v-if="item.Status !== 0"><!-- {{lang['no']}} --></p>
            </div>
          </div>
          <section class="emptyOrder"  v-show="!myOrderList || !myOrderList.length">
            <img src="../../../assets/images/noNews.png">
            <h2>{{lang['Not yet']}}</h2>
            <p v-show="mixUserInfo.token && pair.coinCode !== 'VHKD' && pair.coinCode !== 'USDT'">
              {{lang['warm tips more than three cancellations']
              .replace('{money}', currentFeeConfig.DepositAmount || 0)
              .replace('{time}', getSettingInfo.CancelHour || 0)
              .replace('{count}', getSettingInfo.MaxAllowCancelCount || 0)}}
            </p>
          </section>
        </div>

        <UploadImg :lang="lang" :currentOrderItem="currentOrderItem" :propIsShowUploadingPayment.sync="propIsShowUploadingPayment"></UploadImg>

        <!-- 支付宝\微信扫一扫 -->
        <SwModal :isShow.sync="isShowQrCode" :isShowBg="true" :isCloseOnClickBg="true" :okText="''">
          <div class="projectileAssembly">
            <img src="./../images/close2.png" class="close" @click="isShowQrCode = false">
            <div class="content">
              <p v-show="isAlipayWeChatWrods === 1">{{lang['open Alipay and sweep it']}}</p>
              <p v-show="isAlipayWeChatWrods === 2">{{lang['open WeChat and sweep']}}</p>
              <img :src="currentOrderQrCode">
            </div>
          </div>
        </SwModal>

        <PayOrderImg :lang="lang" :currentOrderItem="currentOrderItem" :propIsShowPayImg.sync="propIsShowPayImg"></PayOrderImg>

        <!-- 确认付款弹窗 -->
        <SwModal :isShow.sync="isShowConfirmPayBox" :isCloseOnClickBg="true">
          <div class="confirmPaymentBox">
            <a class="close" @click="isShowConfirmPayBox = false"><img src="./../images/close2.png"></a>
            <div class="title">{{lang['confirm Payment']}}</div>
            <div class="time">
                {{lang['Left']}}
                {{payInfo.minutes}} {{lang['component']}}
                {{payInfo.seconds}} {{lang['second']}}
            </div>
            <div class="content">
              <p v-html="lang['put money in time for you'].replace('{time}', waitConfirmReceipt(getSettingInfo.WaitConfirmReceipt))"></p>
              <p v-html="lang['reduce credit weight']"></p>
            </div>
            <div class="payment">
              <span>{{lang['payment']}}:￥{{payInfo.Amount | currency('USD', '', 2) | fillDecimal(2)}} {{payInfo.CurrencyCode}}</span>
            </div>
            <button type="button" class="subtimBox" @click="submitConfirmPay">{{lang['confirm Payment']}}</button>
          </div>
        </SwModal>

        <!-- 翻页部分 -->
        <div v-show="itemTotal > pageSize" ref="pageRange">
          <SwPaging :pageSize="pageSize" :pageRange="pageRange" :total="itemTotal" :lang="lang" @jumpPage="jumpPage" :pageIndex="pageIndex"></SwPaging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import SwPaging from '@/components/SwPaging/index.vue'
import Countdown from '@/utils/Countdown.js'
import Utils from '@/utils/Utils.js'
import UploadImg from './UploadImg'
import PayOrderImg from './PayOrderImg'
import EventBus from '@/service/EventBus.js'
import commonFilter from '@/filters/common.js'
import Decimal from '@/libs/decimal.min.js'

export default {
  props: [
    'lang',
    'userInfo',
    'currentFeeConfig',
    'feeConfigs',
    'pair',
    'getSettingInfo',
    'mixUserInfo'
  ],
  data () {
    return {
      unfilledOrdersListWidths: { // 未完成订单列表宽度
        buyRise: '15%',
        numberPrice: '21%',
        bank: '37%',
        operate: '27%'
      },
      completeOrderWidths: {  // {{lang['off the stocks']}}订单 取消订单列表宽度
        time: '14%',
        orderNumber: '15%',
        account: '11%',
        type: '10%',
        currency: '8%',
        price: '8%',
        number: '12%',
        amount: '10%',
        status: '12%'
      },
      myOrderListWidths: {
        coin: '15%',
        side: '11%',
        price: '11%',
        quantity: '16%',
        amount: '16%',
        status: '16%',
        operation: '15%'
      },
      currentOrderType: 0,
      unfilledOrderList: [],
      filledOrderList: [],
      cancelledOrderList: [],
      myOrderList: [],
      unfilledLength: 0,
      completedLength: 0,
      cancelledLength: 0,
      itemTotal: 0,
      pageSize: 10,
      pageRange: 7,
      pageIndex: 1,
      propIsShowUploadingPayment: false,
      isShowQrCode: false, // 查看二维码大图 提示层
      showViewVouchers: false, // 查看凭证弹窗 开关
      payInfo: {},
      isShowConfirmPayBox: false,
      currentOrderItem: {},
      propIsShowPayImg: false,
      currentOrderQrCode: '',
      CancelCountBy: '', // 24小时内取消的次数 ,
      isOpean: true,
      isDisableBtn: false,
      isAlipayWeChatWrods: 0,
      minutes: null,
      seconds: null,
      c2MyOrderTimer: null,
      orderSubscriptTimer: null,
      orderSubscript: {},
      intervalList: [],
    }
  },
  components: {
    SwModal,
    SwPaging,
    UploadImg,
    PayOrderImg
  },
  methods: {
    waitConfirmReceipt (time) {
      let number = new Decimal(time || 0)
      number = number.div(60).toFixed()
      return commonFilter.trimDecimal(number, 2)
    },
    currentDate (CreateTimeStamp) {
      let currentTime = Utils.formatDate(new Date(CreateTimeStamp), 'yyyy/MM/dd hh:mm:ss')
      return currentTime
    },
    // 获取当前订单列表
    getCurrentOrderList () {
      if (this.currentOrderType === 0) return this.unfilledOrderList
      if (this.currentOrderType === 1) return this.filledOrderList
      if (this.currentOrderType === 2) return this.cancelledOrderList
      if (this.currentOrderType === 3) return this.myOrderList
    },
    // 打开付款方式列表
    openPayWayList (item, index) {
      let list = this.getCurrentOrderList()
      item.isShowPayList = !item.isShowPayList
      this.$set(list, index, item)
    },
    // 查看付款方式详情
    checkPayWayDetail (item, index, payIndex) {
      let list = this.getCurrentOrderList()
      item.defaultPayWay = payIndex
      item.isShowPayList = false

      this.$set(list, index, item)
    },
    // 设置默认显示付款方式
    setDefaultPayWayWithArray (list) {
      (list || []).forEach((item, index) => {
        if (item.HasBank) {
          item.defaultPayWay = 0
          this.$set(list, index, item)
          return false
        }
        if (item.HasAlipay) {
          item.defaultPayWay = 1
          this.$set(list, index, item)
          return false
        }
        if (item.HasWeChat) {
          item.defaultPayWay = 2
          this.$set(list, index, item)
          return false
        }
      })
    },
    // 查看卖家联系方式 参数存储
    checkPhone (item, index) {
      this.$set(item, index)
      localStorage.setItem('c2c_wasClickPhonebtn_' + item.ID, true) //   存储参数
      item.isCheckPhone = true
    },
    // 复制银行账号
    copyCardNo (cardNo) {
      let cardNoInput = this.$refs.cardNoInput
      cardNoInput.value = cardNo
      cardNoInput.select()
      document.execCommand('copy')
      ModalApi.message(this.lang['copy success'])
    },
    // 是否取消发布的广告单
    cancelOrder (item, type) {
      let that = this
      let confirm = ModalApi.confirm({
        modalClass: 'commonModal smallModal',
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        content: 'whether to cancel',
        noText: 'deny', // 'cancelBthAD',
        okText: 'yes', // 'determineBthAD',
        title: 'cancellation of order point out',
        isShowBg: true,
        ok () {
          if (that.isDisableBtn) { return }
          that.isDisableBtn = true
          this.$host2.post('Order/CancelOrder', {
            id: item.ID,
            cancelType: type
          }).then((res) => {
            if (res.StatusCode === '200') {
              ModalApi.message(that.lang['cancel success'])
              setTimeout(() => {
                type === 1 && that.$emit('refreshCurrentAdList')
                that.getOrderList()
              }, 1000)
            }
            that.isDisableBtn = false
            confirm.close()
          })
        }
      })
    },
    // 启用暂停广告单
    showStartAdBox (item) {
      let that = this
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'commonModal smallModal',
        content: item.IsEnable ? 'confirm order Suspension' : 'confirm order resume', // '是否启用该广告单',
        noText: 'deny', // 'cancelBthAD',
        okText: 'yes', // 'determineBthAD',
        title: item.IsEnable ? 'pause the advertisement form' : 'enable the Advertising list',
        isShowBg: true,
        ok () {
          if (that.isDisableBtn) { return }
          that.isDisableBtn = true
          this.$host2.post('Order/EnableOrder', {
            orderId: item.ID,
            isEnable: !item.IsEnable
          }).then((res) => {
            if (res.StatusCode === '200') {
              confirm.close()
              setTimeout(() => {
                that.$emit('getAdList')
                that.getOrderList()
              }, 1000)
            }
            that.isDisableBtn = false
          })
        }
      })
    },
    // 取消订单
    CancelOutstandingOrder (item, type) {
      this.$host2.post('CustomerInfo/GetCustomerInfo', {
      }, {
        ignorableCodes: '51077'
      }).then((res) => {
        if (res.StatusCode === '200' || res.StatusCode === '51077') {
          this.CancelCountBy = res.Data.CancelCountBy24H || 0
          let depositAmount
          // 提示的扣钱或扣币精度截取
          for (let i = 0; i < this.feeConfigs.length; i++) {
            if (this.feeConfigs[i].CoinCode === item.CoinCode) {
              depositAmount = this.feeConfigs[i].DepositAmount
            }
          }
          depositAmount = commonFilter.currency(depositAmount || 0, 'USD', '')

          let content = ''

          if (item.DepositAmount > 0) {
            if (this.CancelCountBy >= 3) {
              content = this.lang['cancellation of order withheld'].replace('{DepositAmount}', depositAmount)
              // 取消订单会扣除200 CNY 市值的币作为违约金，请谨慎操作！
            } else {
              content = this.lang['more than three']
                .replace('{DepositAmount}', depositAmount)
                .replace('{time}', this.getSettingInfo.CancelHour || 0)
                .replace('{count}', this.getSettingInfo.MaxAllowCancelCount || 0)
              // "24小时内取消订单达3笔后，每次取消扣除200 CNY 市值的币作为违约金，请谨慎操作！"
            }
          } else {
            if (item.CoinCode === 'VHKD') {
              content = this.lang['whether to cancel']
            } else if (this.CancelCountBy >= 3) {
              content = this.lang['51072'].replace('{time}', this.getSettingInfo.CancelHour || 0)
              // 您当日取消订单次数超过系统限制，已冻结您的使用权限
            } else {
              content = this.lang['Order rights to be frozen on the same day']
                .replace('{time}', this.getSettingInfo.CancelHour || 0)
                .replace('{count}', this.getSettingInfo.MaxAllowCancelCount || 0)
              // 24小时超过三笔取消订单，将被冻结当天下单权限！
            }
          }

          let that = this
          let confirm = ModalApi.confirm({
            modalClass: 'commonModal smallModal',
            isShowCloseBtn: true,
            isCloseOnClickBg: true,
            content: content,
            okText: 'determineC2CBth',
            noText: '',
            title: 'prompt message',
            isShowBg: true,
            ok () {
              if (that.isDisableBtn) { return }
              that.isDisableBtn = true
              this.$host2.post('Order/CancelOrder', {
                id: item.ID,
                cancelType: type
              }).then((res) => {
                if (res.StatusCode === '200') {
                  if (item.DepositAmount > 0 && that.CancelCountBy >= 3) { // 有保证金 取消四次 资产变动
                    setTimeout(() => {
                      that.$emit('refreshCurrentAdList')
                    }, 1000)
                  }
                  setTimeout(() => {
                    ModalApi.message(that.lang['cancel success'])
                    that.getOrderList()
                    that.getOrderSubscript() // 取消订单更新当前列表角标
                  }, 1000)
                }
                confirm.close()
                that.isDisableBtn = false
              })
            }
          })
        }
      })
    },
    // 弹开确认付款窗
    confirmPay (item) {
      this.payInfo = item
      this.isShowConfirmPayBox = true
    },
    // 确认付款
    submitConfirmPay () {
      this.$host2.post('Order/BuyerCompletePay', {
        orderDetailID: this.payInfo.ID,
        // paymentMethod: this.payInfo.defaultPayWay
      }).then((res) => {
        if (res.StatusCode === '200') {
          ModalApi.message(this.lang['confirm Paymentssss'])
          this.getOrderList()
        }
        this.isShowConfirmPayBox = false
      })
    },
    sendCoin (item) {
      let that = this
      let confirm = ModalApi.confirm({
        modalClass: 'commonModal smallModal',
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        content: 'confirm to set the coin', // '确认放币',
        okText: 'determineBth',
        noText: '',
        isShowBg: true,
        title: 'prompt message',
        ok () {
          if (that.isDisableBtn) { return }
          that.isDisableBtn = true
          this.$host2.post('Order/SellerPutCoin', {
            orderDetailID: item.ID
          }).then((res) => {
            if (res.StatusCode === '200') {
              ModalApi.message(that.lang['The coin was set up successfully']) // '放币成功'
              setTimeout(() => {
                that.getOrderList()
                that.getOrderSubscript() // 放币成功更新当前列表角标
                that.$emit('refreshCurrentAdList')
              }, 1500)
            }
            confirm.close()
            that.isDisableBtn = false
          })
        }
      })
    },

    uploadPayImg (item) {
      this.currentOrderItem = item
      this.propIsShowUploadingPayment = true
    },
    viewPayImg (item) {
      this.currentOrderItem = item
      this.propIsShowPayImg = true
    },
    // 二维码查看
    viewQrCode (qrCode, index) {
      this.isAlipayWeChatWrods = index  // 1显示支付宝 2显示微信
      this.currentOrderQrCode = qrCode
      this.isShowQrCode = true
    },
    // 打开 查看支付凭证
    openViewVouchersBtn () {
      this.showViewVouchers = true
      this.$nextTick(() => {
        this.swiperCtc()
      })
    },
    // 关闭 查看支付凭证
    closeViewVouchers () {
      this.showViewVouchers = false
    },
    // 查看凭证切换效果
    swiperCtc () {
      new Swiper('.swiperCtc', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
      })
    },
    createCountdown (list) {
      list.forEach((item, index) => {
        // 待支付 已支付 要求上传支付凭证
        // item.StatusOutTime = '2018-1-24 8:8:8'  let outDate = new Date((new Date()).getTime() + 30 * 60 * 1000)
        let outDate = new Date(+(new Date()) + item.OutTimeBySeconds * 1000)
        if ((item.Status === 1 || item.Status === 2 || item.Status === 4) && item.OutTimeBySeconds > 0) {
          item.gap = '1'
          item.hours = '--'
          item.minutes = '--'
          item.seconds = '--'
          this.$set(list, index, item)

          let that = this
          Countdown(outDate.getTime() / 1000, null, '', {
            step (params) {
              item.gap = params.remaining.gap
              item.hours = params.remaining.h
              item.minutes = params.remaining.m
              item.seconds = params.remaining.s
              that.$set(list, index, item)
            },
            end () {
              item.gap = 0
              if (that.payInfo === item) {
                that.isShowConfirmPayBox = false
              }
              // 未付款或已付款未上传支付凭证 都直接变成取消订单
              if (!that.intervalList[item.ID]) {
                that.getOrderList(item.ID)
                that.intervalList[item.ID] = window.setInterval(() => {
                  that.getOrderList(item.ID)
                }, 1000 * 5)
              }
            }
          })
        }
      })
    },
    setScrollBar (height) {
      this.$nextTick(() => {
        this.$refs.orderListWrap.style.height = height + 'px'
        this.$refs.orderMainAAA.style.height = height + 'px'
        this.$refs.orderMain.style.height = height + 'px'
        $('.orderMain').niceScroll({
          autohidemode: false
        }).resize()
      })
    },
    // 调取状态的接口
    getOrderList (itemID) {
      let height
      if (!this.mixUserInfo.token) {
        setTimeout(() => {
          this.setScrollBar(345)
        }, 100)
        return
      } // 未登录不调取接口
      let ajaxUrl = ''
      if (this.currentOrderType === 3) {
        ajaxUrl = 'GetTradeOrderList'
      } else {
        ajaxUrl = 'GetDealOrderList'
      }

      this.$host2.post(`Order/${ajaxUrl}`, {
        orderType: this.currentOrderType,
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize
      }, {
        isDisposeCode: false
      }).then((res) => {
        this.itemTotal = res.TotalItem
        // 0 是未完成订单列表, 1 是已完成订单列表, 2 是取消订单列表, 3 是我发布的订单列表
        if (this.currentOrderType === 0) {
          this.unfilledOrderList = res.Data || []
          let hasChange = true
          for (let i = this.unfilledOrderList.length - 1; i >= 0; i--) {
            if (this.unfilledOrderList[i].ID === itemID) {
              hasChange = false
            }
            this.unfilledOrderList[i].isCheckPhone = JSON.parse(localStorage.getItem('c2c_wasClickPhonebtn_' + this.unfilledOrderList[i].ID))
          }
          if (hasChange) {
            if (this.intervalList[itemID]) {
              clearInterval(this.intervalList[itemID])
              this.getOrderSubscript() // 超时取消调角标接口
            }
          }
          this.setDefaultPayWayWithArray(this.unfilledOrderList)
          this.createCountdown(this.unfilledOrderList)
        }

        if (this.currentOrderType === 1) {
          this.filledOrderList = res.Data || []
        }
        if (this.currentOrderType === 2) {
          this.cancelledOrderList = res.Data || []
        }
        if (this.currentOrderType === 3) {
          this.myOrderList = res.Data || []
        }
        setTimeout(() => {
          if (this.currentOrderType === 0) {
            height = this.$refs.unfilledOrdersList.offsetHeight + this.$refs.orderTitle.offsetHeight + this.$refs.pageRange.offsetHeight
          }
          if (this.currentOrderType === 1) {height = this.$refs.completeOrderList.offsetHeight + this.$refs.orderTitle.offsetHeight + this.$refs.pageRange.offsetHeight}
          if (this.currentOrderType === 2) {height = this.$refs.cancelOrdersList.offsetHeight + this.$refs.orderTitle.offsetHeight + this.$refs.pageRange.offsetHeight}
          if (this.currentOrderType === 3) {height = this.$refs.myOrderList.offsetHeight + this.$refs.orderTitle.offsetHeight + this.$refs.pageRange.offsetHeight}
          this.setScrollBar(height)
        }, 100)

        // this.$emit('resizeAdvertisingListScroll')
      })
    },
    switchOrderType (type) {
      this.currentOrderType = type
      this.pageIndex = 1
      this.getOrderList()
      clearInterval(this.c2MyOrderTimer) // 每次切换清除循环调用接口
      if (this.currentOrderType === 3) {
        this.c2MyOrderTimer = window.setInterval(() => {
          this.getOrderList() // 我发布的订单 10s 更新一次
        }, 1000 * 10)
      }

      // 点击隐藏当前订单数
      this.orderTotleSetGet()
    },
    jumpPage (no) {
      this.pageIndex = no
      this.getOrderList()
    },
    // 角标提示接口
    getOrderSubscript () {
      if (!this.mixUserInfo.token) { return }
      this.$host2.post('Order/GetOrderSubscript')
      .then((res) => {
        if (res.StatusCode === '200') {
          this.orderSubscript = res.Data || {}

          this.orderTotleSetGet()
        }
      })
    },
    orderTotleSetGet () {
      if (this.currentOrderType === 0) {
        this.unfilledLength = this.orderSubscript.UnfinishedCount || 0
        localStorage.setItem('unfilledLength', this.unfilledLength)
      }
      if (this.currentOrderType === 1) {
        this.completedLength = this.orderSubscript.CompletedCount || 0
        localStorage.setItem('completedLength', this.completedLength)
      }
      if (this.currentOrderType === 2) {
        this.cancelledLength = this.orderSubscript.CanceledCount || 0
        localStorage.setItem('cancelledLength', this.cancelledLength)
      }
    },
    init () {
      this.getOrderList()
      this.getOrderSubscript()
    }
  },
  created () {
    // 买卖后，要刷新未完成订单
    EventBus.$on('refreshUnfilledOrderList', () => {
      if (this.currentOrderType === 0) {
        setTimeout(() => { // 因为后台同步有延迟
          this.pageIndex = 1
          this.getOrderList()

        }, 1000)
      }
    })
    // 发布后要刷新
    EventBus.$on('refreshMyOrderList', () => {
      if (this.currentOrderType === 3) {
        setTimeout(() => { // 因为后台同步有延迟x
          this.pageIndex = 1
          this.getOrderList()
        }, 1000)
      }
    })
  },
  mounted () {
    this.unfilledLength = localStorage.getItem('unfilledLength') || 0
    this.completedLength = localStorage.getItem('completedLength') || 0
    this.cancelledLength = localStorage.getItem('cancelledLength') || 0

    this.init()

    clearInterval(this.orderSubscriptTimer)
    this.orderSubscriptTimer = window.setInterval(() => {
      this.getOrderSubscript()
    }, 1000 * 10)
  },
  beforeDestroy (to, from, next) {
    clearInterval(this.c2MyOrderTimer)
    clearInterval(this.orderSubscriptTimer)
  }
}
</script>

<style lang="less">
@import './../css/customerOrder.less';

@media screen and (max-width:1200px){
  .modal .uploadPayImgBox {
     width: 680px !important;
     padding:10px 30px 20px !important;
  }
}
</style>
